<template>
  <a-page-header title="云在线考试系统" sub-title="仪表盘" />
  <a-skeleton :active="true" :loading="loading">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic title="所有用户" :value="systemInfo.total_user" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="正在考试用户数" :value="systemInfo.on_exam_num" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="总试卷数量" :value="systemInfo.paper_num" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="总考试场次" :value="systemInfo.total_exam" />
        </a-card>
      </a-col>
    </a-row>
  </a-skeleton>
  <br />
  <a-row :gutter="16">
    <a-col :span="16">
      <a-skeleton :active="true" :loading="loading">
        <a-card title="考试安排">
          <template #extra>
            <a-button type="link" @click="$router.push({ name: 'ExamManage' })">全部安排</a-button>
          </template>
          <a-timeline>
            <a-timeline-item v-for="item in activeExam" :key="item.id">
              {{ item.id }} - 试卷：{{ item.name }} 开始时间：{{ item.start_time }} 时长: {{ item.duration }}秒
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </a-skeleton>
    </a-col>
    <a-col :span="8">
      <a-card title="常用操作">
        <a-button type="link" @click="$router.push({ name: 'ExamManage' })"> 考试安排 </a-button>
        <a-button type="link" @click="$router.push({ name: 'PaperManage' })"> 试卷管理 </a-button>
        <a-button type="link" @click="$router.push({ name: 'UserManage' })"> 用户管理 </a-button>
        <a-button type="link" @click="logout"> 退出登录 </a-button>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { message } from "ant-design-vue";
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { adminLogout, getActiveExam, getSystemInfo } from "../../utils/api";
export default defineComponent({
  setup() {
    const systemInfo = ref({
      total_user: 0,
      on_exam_num: 0,
      paper_num: 0,
      total_exam: 0,
    });
    const loading = ref(true);
    const activeExam = ref([]);
    const router = useRouter();

    const fetchData = async () => {
      loading.value = true;
      let result = await getSystemInfo();
      systemInfo.value = result.data.data;
      result = await getActiveExam();
      activeExam.value = result.data.data;
      loading.value = false;
    };

    onMounted(() => {
      fetchData();
    });

    const logout = () => {
      adminLogout().then((res) => {
        message.success(res.data.message);
        router.push({ name: "AdminLogin" });
      });
    };

    return {
      loading,
      systemInfo,
      activeExam,
      logout,
    };
  },
});
</script>
